<template>
  <div class="docker">
    <div class="docker__item" :class="{ active: docker.active }" v-for="(docker, index) in dockerList" :key="index" @click="toPage(docker)">
      <span class="iconfont" v-html="docker.icon"></span>
      <span class="docker__item__text">{{ docker.text }}</span>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const dockerList = reactive([
      { icon: '&#xe617;', text: '首页', active: true },
      { icon: '&#xe74b;', text: '购物车' },
      { icon: '&#xe643;', text: '订单' },
      { icon: '&#xe63f;', text: '我的', path: '/my' }
    ])

    const router = useRouter()

    const toPage = (dockerItem) => {
      if (dockerItem.path) {
        router.push(dockerItem.path)
      }
    }

    return {
      dockerList,
      toPage
    }
  }
}
</script>

<style lang="scss" scoped>
.docker {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 0.01rem solid $content-bgColor;
  &__item {
    flex: 1;
    text-align: center;
    &.active {
      color: #1fa4fc;
    }
    > span {
      display: block;
      font-size: 0.2rem;
      &.iconfont {
        margin: 0.07rem auto 0.02rem;
      }
    }
    &__text {
      transform: scale(0.5, 0.5);
      transform-origin: center top;
    }
  }
}
</style>
